define(["layer", "control"],function (layer, control) {
    var MeteoMap = {
        mapConfig: {
            zoom: 8,
            center: [116.351, 40.193],
            minZoom: 3,
            maxZoom: 18,
            projection: "EPSG:3857",
            extent: [26.48, -5.68, 174.14, 60.89],
            baseLayers: [{
                type: "tile",
                code: "tdt",
                layer: "vec_w"
            },{
                type: "tile",
                code: "tdt",
                layer: "cva_w"
            }],
            controls: {
                base: ["zoom", "mousePosition", "scaleLine", "overviewMap"
                    , "zoom2extent", "fullScreen"],
                senior: ["drawTools", "basemap", "legend", "rorate"]
            }
        },

        baseLayer: null,
        baseLabel: null,

        mapDom: "map",
        map:null,

        initMap: function() {
            var self = this;

            var _controls = self.mapConfig.controls.base,
                controls = [];
            for(var i=0, len=_controls.length;i<len;i++){
                controls.push(control.getControl(_controls[i]));
            }

            var _center = ol.proj.transform(self.mapConfig.center, "EPSG:4326", self.mapConfig.projection),
                _extent = ol.proj.transformExtent(self.mapConfig.extent, "EPSG:4326", self.mapConfig.projection);

            self.map = new ol.Map({
                controls: ol.control.defaults({
                    attribution: false,
                    zoom: false
                }).extend(controls),
                target: 'map',
                layers: [
                    self.baseLayer,
                    self.baseLabel
                ],
                view: new ol.View({
                    projection: self.mapConfig.projection,
                    center: _center,
                    zoom: self.mapConfig.zoom,
                    minZoom: self.mapConfig.minZoom,
                    maxZoom: self.mapConfig.maxZoom,
                    extent: _extent
                })
            });
            window.meteoMap = self.map;

            //高级的控件
            var seniorControls = self.mapConfig.controls.senior;
            for(var i=0, len=seniorControls.length;i<len;i++){
                self.map.addControl(control.getControl(seniorControls[i]));
            }

            //测试用
            $("#uniquevalue").on("click", function () {
                var layerData = {
                    url: "data/beijing.json",
                    title: "唯一值渲染"
                };
                var styleData = {
                    label: {
                        "show": true,
                        "field": "NAME",
                        "font": "bold 14px 微软雅黑",
                        "textColor": "black",
                        "strokeWidth": 2,
                        "strokeColor": "white"
                    },
                    stroke: {
                        "width": 1,
                        "color": "red",
                        "dash":[0]
                    },
                    field: "NAME",
                    colorMap: {
                        "怀柔":"#2a83e9",
                        "密云":"#d5ec20",
                        "延庆":"#62e0ec",
                        "平谷":"#ec388e",
                        "昌平":"#6cecb2",
                        "顺义":"#ec645c",
                        "北京":"#5367ec",
                        "通州":"#1decc7",
                        "大兴":"#2bec47"
                    }
                };
                layer.addThemeLayer("uniquevalue", layerData, styleData);
            });

            $("#breakvalue").on("click", function () {
                var layerData = {
                    url: "data/beijing.json",
                    title: "端点值渲染"
                };
                var styleData = {
                    label: {
                        "show": true,
                        "field": "NAME",
                        "font": "bold 14px 微软雅黑",
                        "textColor": "black",
                        "strokeWidth": 2,
                        "strokeColor": "white"
                    },
                    stroke: {
                        "width": 1,
                        "color": "red",
                        "dash":[0]
                    },
                    field: "POPU",
                    colorMap: {
                        "<25": "#2a83e9",
                        "25-50": "#d5ec20",
                        "50-100": "#62e0ec",
                        ">100": "#ec388e"
                    }
                };
                layer.addThemeLayer("breakvalue", layerData, styleData);
            });

            $("#dotdensity").on("click", function () {
                var layerData = {
                    url: "data/university.json",
                    title: "点密度图"
                };
                var styleData = {
                    label: {
                        "show": true,
                        "field": "name",
                        "font": "bold 14px 微软雅黑",
                        "textColor": "black",
                        "strokeWidth": 2,
                        "strokeColor": "white"
                    },
                    stroke: {
                        "width": 1,
                        "color": "red",
                        "dash":[0]
                    },
                    fill: "rgba(255, 255, 255, .5)",
                    radius: 3
                };
                layer.addThemeLayer("dotdensity", layerData, styleData);
            });

            $("#heatmap").on("click", function () {
                var layerData = {
                    url: "data/university.json",
                    title: "热力图"
                };
                var styleData = {
                    blur: 50,
                    radius: 10,
                    shadow: 200,
                    gradient: null
                };
                layer.addThemeLayer("heatmap", layerData, styleData);
            });

            $("#chartmap").on("click", function () {
                var layerData = {
                    url: "data/chartdata.json",
                    title: "统计图"
                };
                var styleData = {
                    type: "bar",//pie, bar,stack
                    size: [50, 50],
                    fields:{
                        "male": "男",
                        "female": "女"
                    }
                };
                layer.addThemeLayer("chartmap", layerData, styleData);
            });
            
            $("#themeclear").on("click", function () {
                layer.clearThemeLayer();
            })
        },

        getBaseLayer: function(){
            var self = this;
            var _baseLayers = self.mapConfig.baseLayers;
            self.baseLayer = layer.getLayer(_baseLayers[0]);
            self.baseLabel = layer.getLayer(_baseLayers[1]);
            return [
                self.baseLayer,
                self.baseLabel
            ]
        },

        changeBaseMap: function (type, lyr) {
            var self = this;
            var _label = layer.code === "img_w"?"cia_w":"cva_w";
            var baseUrl = layer.getTileUrl(type, lyr);
            var lblUrl = layer.getTileUrl(type, _label);

            var baseSource = layer.getTileSource(baseUrl),
                lblSource = layer.getTileSource(lblUrl);

            self.baseLayer.setSource(baseSource);
            self.baseLabel.setSource(lblSource);
        }
    };
    return MeteoMap;
});